<template>
  <!--热门推荐  -->
  <div class="mod-hot mod-bg">
    <div class="container">
      <div class="index-hd">
        <h2 class="index-title">热门推荐</h2>
      </div>
      <div class="mod-index-tab">
        <a
          href="javascript:;"
          class="index-tab-item index-tab-item-current"
          @click="itemClick"
          >热门</a
        >
        <a
          href="javascript:;"
          class="index-tab-item"
          @click="clickPlaylist('华语')"
          >华语</a
        >
        <a
          href="javascript:;"
          class="index-tab-item"
          @click="clickPlaylist('流行')"
          >流行</a
        >
        <a
          href="javascript:;"
          class="index-tab-item"
          @click="clickPlaylist('摇滚')"
          >摇滚</a
        >
        <a
          href="javascript:;"
          class="index-tab-item"
          @click="clickPlaylist('民谣')"
          >民谣</a
        >
        <a
          href="javascript:;"
          class="index-tab-item"
          @click="clickPlaylist('电子')"
          >电子</a
        >
        <a href="javascript:;" class="more-right" @click="clickPlaylist('')">
          更多
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>

      <el-carousel
        class="clearfix"
        indicator-position="outside"
        :height="playlistHeight"
        :autoplay="false"
        trigger="click"
      >
        <el-carousel-item class="playlist-item" v-for="item in 4" :key="item">
          <ul
            ref="playlist-item-ul"
            class="playlist-item-ul clearfix"
            v-if="showPlaylist"
          >
            <li
              class="playlist-item-li"
              v-for="pItem in personalized[item - 1]"
              :key="pItem.id"
            >
              <play-list :item="pItem"></play-list>
            </li>
          </ul>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import PlayList from "components/playlist/PlayList.vue";
export default {
  // props: {
  //   personalized: {
  //     type: Array,
  //     default() {
  //       return [];
  //     },
  //   },
  // },
  data() {
    return {
      playlistHeight: "616px",
      personalized: [],
      showPlaylist: false,
    };
  },
  components: {
    PlayList,
  },
  mounted() {
    this.getPersonalized();

    // 一开始渲染结束给高度赋值
    // this.$nextTick(() => {
    //   console.log(this.personalized);
    //   this.playlistHeight =
    //     this.$refs["playlist-item-ul"][0].offsetHeight + "px";
    //   console.log(this.playlistHeight);
    // });
  },
  methods: {
    itemClick() {
      this.$router.push("/playlists");
    },
    clickPlaylist(cat) {
      this.playPlaylists(cat);
    },
    getPersonalized() {
      this.axios({
        /* 热门推荐接口地址 */
        url: "/personalized?limit=40",
      })
        .then((res) => {
          this.personalized[0] = res.data.result.slice(0, 10);
          this.personalized[1] = res.data.result.slice(10, 20);
          this.personalized[2] = res.data.result.slice(20, 30);
          this.personalized[3] = res.data.result.slice(30, 40);
          this.showPlaylist = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.index-hd {
  position: relative;
  padding-top: 3%;
  padding-bottom: 2%;
}
.index-title {
  margin: 0 auto;
  text-align: center;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: 10px;
}
/* mod-index-tab */
.mod-index-tab {
  height: 50px;
  text-align: center;
}
.index-tab-item {
  display: inline-block;
  font-size: 18px;
  margin: 0 24px;
}
.index-tab-item-current {
  color: var(--color-theme);
}
.index-tab-item:hover {
  color: var(--color-theme);
}
.more-right {
  position: absolute;
  right: 10px;
}
.more-right:hover {
  color: var(--color-theme);
}
/* playlist-item */
.playlist-item {
  position: relative;
  padding-bottom: 0;
  float: left;
}
.playlist-item-ul {
  margin-right: -20px;
}
.playlist-item-li {
  width: 20%;
  float: left;
}
</style>